<!DOCTYPE html>
<html lang="en" ng-app="mock">
<head>
    <meta charset="UTF-8">
    <title>Mock</title>
    <link rel="stylesheet" href="framework/bootstrap/css/bootstrap.min.css"/>
</head>
<body>

<div class="container" style="margin-top: 100px" ng-controller="MockCtl">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">日期</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="日期,例如 2017-09-12" ng-model="model.partition">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">pv数</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="model.pvSize"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">订单数</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="model.orderSize"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">收藏数</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="model.favoriteSize"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">加入购物车数</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="model.shoppingCartSize"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">搜索数</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="model.searchSize"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label"></label>
            <button type="button" class="btn btn-primary" ng-click="mock()">Mock</button>
            <button type="button" class="btn btn-danger" ng-click="clear()">清除所有动态数据</button>
            <button type="button" class="btn btn-info" ng-click="analysis()">分析数据</button>
        </div>

    </form>
    <div class="text-center">
        <img src="img/loading.png" style="width: 100px; height: 100px;" ng-show="loading">
        <span style="font-size: 25px;" ng-show="loading" ng-bind="operating"></span>
    </div>


</div>


<script type="text/javascript" src="framework/jquery.min.js"></script>
<script type="text/javascript" src="framework/angularjs/angular.min.js"></script>
<script type="text/javascript" src="framework/angularjs/angular-resource.min.js"></script>
<script type="text/javascript" src="framework/bootstrap/js/bootstrap.min.js"></script>
<script type="application/javascript">
    var appService = angular.module('app.service', ['ngResource']);
    appService.service('MockService', ['$resource', '$q', function ($resource, $q) {
        var res = $resource('', {}, {
            mock: {
                method: 'POST',
                isArray: false,
                url: '/data/mock'
            },
            clear: {
                method: 'DELETE',
                url: '/data/clear'
            },
            analysis: {
                method: 'POST',
                url: '/data/analysis'
            }
        });

        return {
            mock: function (model) {
                var d = $q.defer();
                res.mock({}, model, function (result) {
                    d.resolve(result);
                }, function (result) {
                    d.reject(result);
                });
                return d.promise;
            },
            clear: function () {
                var d = $q.defer();
                res.clear({}, function (result) {
                    d.resolve(result);
                }, function (result) {
                    d.reject(result);
                });
                return d.promise;
            },
            analysis: function (partition) {
                var d = $q.defer();
                res.analysis({partition: partition}, {}, function (result) {
                    d.resolve(result);
                }, function (result) {
                    d.reject(result);
                });
                return d.promise;
            }
        }
    }]);
    angular.module('mock', ['app.service']).controller('MockCtl', ['$scope', 'MockService', controller]);

    function controller($scope, MockService) {

        $scope.model = {};
        stopOperating();

        $scope.mock = function () {
            startOperating();
            MockService.mock($scope.model).then(function () {
                stopOperating();
                alert("Mock成功");
            }, function () {
                stopOperating();
                alert("Mock失败");
            })
        };

        $scope.clear = function () {
            startOperating();
            MockService.clear().then(function () {
                stopOperating();
                alert("删除成功");
            }, function () {
                stopOperating();
                alert("删除失败");
            })
        };

        $scope.analysis = function () {
            startOperating();
            MockService.analysis($scope.model.partition).then(function () {
                alert("分析成功");
                stopOperating();
            }, function () {
                stopOperating();
                alert("分析失败");
            })
        };

        function startOperating() {
            $scope.loading = true;
        }

        function stopOperating() {
            $scope.loading = false;
            $scope.operating = 'Operating... ...';
        }
    }

</script>
</body>
</html>
